<template>
  <div class="mineInformationBox">
    <header-box title="个人设置" :showLeft="true" :showRight="true"></header-box>
    <div class="cellBox">
      <router-link to="mineInformation" class="cell flex">
        <img src="../assets/images/0000000000_01.jpg" alt class="contImg" />
        <div class="label">185****2312</div>
        <div class="rightBox flex">
          <div class="cont"></div>
          <x-icon type="ios-arrow-right" size="24" class="iconBox" />
        </div>
      </router-link>
      <router-link to="vipQRCode" class="cell flex">
        <div class="label">会员码</div>
        <div class="rightBox flex">
          <div class="cont">
            <img src="../assets/images/qrcode01.png" alt class="qrcodeImg" />
          </div>
          <x-icon type="ios-arrow-right" size="24" class="iconBox" />
        </div>
      </router-link>
      <router-link to="harvestAddress" class="cell flex" @click="popupShow=true">
        <div class="label">地址管理</div>
        <div class="rightBox flex">
          <div class="cont">新增 / 修改地址</div>
          <x-icon type="ios-arrow-right" size="24" class="iconBox" />
        </div>
      </router-link>
      <router-link to="invoiceCertification" class="cell flex" @click="popupShow=true">
        <div class="label">增票资质</div>
        <div class="rightBox flex">
          <div class="cont">个人增票认证</div>
          <x-icon type="ios-arrow-right" size="24" class="iconBox" />
        </div>
      </router-link>
      <router-link to="bindingAccount" class="cell flex" @click="popupShow=true">
        <div class="label">关联账号</div>
        <div class="rightBox flex">
          <div class="cont">微信等</div>
          <x-icon type="ios-arrow-right" size="24" class="iconBox" />
        </div>
      </router-link>
    </div>
    <div class="footerBox" @click="outShow=true">退出登录</div>
    <!-- 退出确认弹框 -->
    <confirm v-model="outShow" @on-confirm="exitConfirm">
      <p style="text-align:center;">是否退出当前登录</p>
    </confirm>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { Confirm } from 'vux'

export default {
  components: {
    HeaderBox,
    Confirm
  },
  data() {
    return {
      outShow: false
    }
  },

  methods: {
    exitConfirm() {}
  }
}
</script>

<style lang="less" scoped>
.mineInformationBox {
  .cellBox {
    background-color: #fff;
    padding: 0 20px;
    .cell {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      position: relative;
      color: currentColor;
      min-height: 60px;
      &:last-child {
        border-bottom: none;
      }
      .label {
        font-size: 30px;
      }
      .contImg {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 50%;
        display: block;
        margin-right: 20px;
      }
      .rightBox {
        margin-left: auto;
        .cont {
          color: #666;
          font-size: 30px;
          .qrcodeImg {
            width: 50px;
            display: block;
          }
        }
        .iconBox {
          margin-left: 20px;
          fill: #666;
        }
      }
    }
  }

  .footerBox {
    margin: 40px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f60;
    color: #fff;
    border-radius: 20px;
    font-size: 30px;
  }
}
</style>